<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/bootstrap/bootstrap-icons.css">
    <style>
        #app {
            width: 500px;
            margin: 0 auto;
        }

        .btn-success {
            width: 100%;
        }
        .list-item{
            display: flex;
            flex-flow: row nowrap;
        }
        .list-item span{
            vertical-align: middle;
            padding-right: 6px;
        }
        .list-item .info{
            flex-grow: 1;
        }
        .empty{
            text-align: center;
        }
        .badge{
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="card my-3 bg-body-secondary">
            <div class="card-body">
                <h5>添加新邮箱</h5>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="请输入邮箱"
                        :class=" inputEmail==''?'':(regEmail.test(inputEmail)?'is-valid':'is-invalid') "
                        :value="inputEmail"
                        @input="inputEmail=$event.target.value"
                    >
                </div>
                <div class="mb-3">
                    <button type="button" class="btn btn-success" 
                        @click=" addEmailItem() " 
                        :disabled=" !regEmail.test(inputEmail) "
                    >添加</button>
                </div>
            </div>
        </div>
        <div class="card bg-body-secondary">
            <div class="card-body">
                <ul class="list-group">
                    <li class="list-group-item empty" 
                        v-show=" emails.length==0 "
                    >请先添加邮箱</li>
                    <li class="list-group-item list-item" 
                        v-for="(e,i) in emails"
                    >
                        <span>
                            <input type="checkbox">
                        </span>
                        
                        <!-- <span v-if="isEdit" class="info">
                            <input type="text" :value="e">
                        </span>
                        <span v-else class="info">{{ e }}</span>
                        <span v-if="!isEdit" class="badge rounded-pill text-bg-primary" @click="isEdit=true">编辑</span>
                        <span v-else class="badge rounded-pill text-bg-primary" @click="isEdit=false">完成</span> -->
                        
                        <span v-if="editeIndex==i" class="info">
                            <input type="text" :value="e" @input="emails[i]=$event.target.value">
                        </span>
                        <span v-else class="info">{{ e }}</span>
                        <span v-if="editeIndex!=i" class="badge rounded-pill text-bg-primary" @click="editeIndex=i">编辑</span>
                        <span v-else class="badge rounded-pill text-bg-primary" @click="editeIndex=-1">完成</span>

                        <span class="badge rounded-pill text-bg-primary" @click=" emails.splice(i,1) ">删除</span>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <script src="../assets/mock/mock-min.js"></script>
    <script type="module">
        // inputEmail==''?'':(regEmail.test(inputEmail)?'is-valid':'is-invalid')
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data() {
                return {
                    // emails:Mock.mock({
                    //     "list|10":[ /^[a-z]+@[a-z]+(\.[a-z]+)$/ ]
                    // }).list,
                    emails:[],
                    regEmail:/^[a-zA-z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)$/,
                    inputEmail:"",
                    isEdit:false,
                    editeIndex:-1
                }
            },
            methods:{
                addEmailItem(){
                    this.emails.push( this.inputEmail )
                    this.inputEmail = "";
                }
            }
        }).mount("#app")
    </script>
</body>

</html>